<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>HTML5 Canvas</title>
		<link
			rel="icon"
			href="https://fav.farm/🔥" />
	</head>
	<body>
		<canvas
			id="draw"
			width="800"
			height="800"></canvas>
		<script
			type="module"
			async>
			let canvas = document.getElementById('draw');
			let context = canvas.getContext('2d');
			canvas.width = window.innerWidth;

			canvas.height = window.innerHeight;
			context.strokeStyle = '#BADA55';
			let isDrawing = false;
			let x = 0,
				y = 0;
			let hue = 0;
			let changeDirection = false;
			let maxLineWidth = 100;
			context.lineCap = 'round';
			context.lineJoin = 'round';
			context.lineWidth = 1;
			let lastX = 0,
				lastY = 0;
			function draw(mouseEvent) {
				if (!isDrawing) return;
				context.beginPath();
				context.moveTo(lastX, lastY);

				context.lineTo(mouseEvent.offsetX, mouseEvent.offsetY);
				context.stroke();
				[lastX, lastY] = [mouseEvent.offsetX, mouseEvent.offsetY];
				hue++;
				if (hue > 360) hue = 0;
				context.strokeStyle = 'hsl(' + hue + ', 100%, 50%)';
				if (context.lineWidth >= maxLineWidth || context.lineWidth <= 1) {
					changeDirection = !changeDirection;
				}
				if (changeDirection) context.lineWidth++;
				else context.lineWidth--;
			}
			addEventListener('mousemove', draw);
			addEventListener('mousedown', function (mouseEvent) {
				isDrawing = true;
				[lastX, lastY] = [mouseEvent.offsetX, mouseEvent.offsetY];
			});
			addEventListener('mouseup', function () {
				isDrawing = false;
			});
			addEventListener('mouseout', function () {
				isDrawing = false;
			});
		</script>

		<style>
			html,
			body {
				margin: 0;
			}
		</style>
	</body>
</html>
